<template>
  <el-dialog :model-value="visible" :title="config.configName" width="800px" center align-center destroy-on-close @close="onClose">
    <div class="dialog-content">
      <div v-html="config.configValue" />
    </div>
    <template #footer>
      <el-button @click="onClose">取 消</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  // 打开和关闭
  import { reactive, ref } from 'vue'

  const config = reactive({
    configValue: undefined,
    configName: undefined
  })

  const visible = ref(false) // 弹窗显示状态
  const onOpen = (item) => {
    if (item) {
      Object.assign(config, item)
    }
    visible.value = true
  }
  defineExpose({ onOpen })
  const onClose = () => {
    visible.value = false
    Object.assign(config, {})
  }
</script>
<style lang="scss" scoped>
  :deep(img) {
    width: 100%;
  }
</style>
